<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="yaya">
        <title>首页--小米商场</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/home.css">
        <link rel="stylesheet" href="css/foot-nav.css">
    </head>
    <body>
        <div class="h-container">
            <!--固定头部-->
            <div class="header navbar-fixed-top" id="h-nav">
                <span class="glyphicon glyphicon-apple    logo"></span>
                <div class="input-group">
                    <span class="glyphicon glyphicon-search"></span>
                    <input type="text" placeholder="搜索商品名称">
                </div>
                <span><a href="#">登录</a></span>
            </div>
            <!--轮播图-->
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="img/carousel-1.jpg" alt="...">
                    </div>
                    <div class="item">
                        <img src="img/carousel-2.jpg" alt="...">
                    </div>
                    <div class="item">
                        <img src="img/carousel-3.jpg" alt="...">
                    </div>
                    <div class="item">
                        <img src="img/carousel-4.jpg" alt="...">
                    </div>
                </div>
        	</div>
        	<!--商城早报-->
            <div class="news">
                <span class="title">商城早报</span>
                <span>|&#x3000;轻薄、漂亮、好用！首批小米5c用户评价...</span>
            </div>
            <!--内容-->
            <div class="h-content">
                <section class="part-one">
                    <div class="pull-left">
                        <img src="img/tel-1.png" alt="">
                    </div>
                    <div class="pull-right">
                        <div class="top">
                            <img src="img/tel-2.png" alt="">
                        </div>
                        <div class="bottom">
                            <img src="img/tel-3.png" alt="">
                        </div>
                    </div>
                </section>
                <div class="clearfix"></div>
                <section class="banner">
                    <img src="img/tel-4.png" alt="">
                </section>
                <!--明星单品-->
                <section class="banner item">
                    <h1>明星单品</h1>
                    <img src="img/live.png" alt="">
                    <div class="tel">
                        <figure>
                            <img src="img/tel-6.png" alt="">
                            <figcaption>
                                <p>红米Note 4 32CB版</p>
                                <p>全金属</p>
                                <p>￥999</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/tel-6.png" alt="">
                            <figcaption>
                                <p>红米Note 4 32CB版</p>
                                <p>全金属</p>
                                <p>￥999</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/tel-6.png" alt="">
                            <figcaption>
                                <p>红米Note 4 32CB版</p>
                                <p>全金属</p>
                                <p>￥999</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/tel-6.png" alt="">
                            <figcaption>
                                <p>红米Note 4 32CB版</p>
                                <p>全金属</p>
                                <p>￥999</p>
                            </figcaption>
                        </figure>
                    </div>
                </section>
                <!--新品上线-->
                <section class="banner item">
                    <h1>新品上线</h1>
                    <img src="img/tel-5.png" alt="">
                    <div class="tel">
                        <figure>
                            <img src="img/tel-8.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p>全金属</p>
                                <p>￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/tel-8.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p>全金属</p>
                                <p>￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/tel-8.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p>全金属</p>
                                <p>￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/tel-8.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p>全金属</p>
                                <p>￥19.9</p>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="more">
                        <span><a href="">更多新品></a></span>
                    </div>
                </section>
                <!--红米国民手机-->
                <section class="banner">
                    <img src="img/tel-10.png" alt="">
                </section>
                <!--米家智能-->
                <section class="banner item ">
                    <h1>米家智能</h1>
                    <img src="img/tel-9.png" alt="">
                    <div class="tel jiaju">
                        <figure>
                            <img src="img/tel-11.png" alt="">
                        </figure>
                        <figure>
                            <figcaption>
                                <p>米家智能故事机</p>
                                <p>海量好故事，只能语音交互，材料安全耐用</p>
                                <p>￥199</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <figcaption>
                                <p>米家智能故事机</p>
                                <p>海量好故事，只能语音交互，材料安全耐用</p>
                                <p>￥199</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/tel-11.png" alt="">
                        </figure>
                        <figure>
                            <img src="img/tel-11.png" alt="">
                        </figure>
                        <figure>
                            <figcaption>
                                <p>米家智能故事机</p>
                                <p>海量好故事，只能语音交互，材料安全耐用</p>
                                <p>￥199</p>
                            </figcaption>
                        </figure>
                    </div>
                    <div class="more">
                        <span><a href="">更多米家智能产品></a></span>
                    </div>
                </section>
                <!--更多产品:网页版鼠标悬浮时出现底部标题-->
                <section class="banner item">
                    <div class="tel more-tel">
                        <figure>
                            <img src="img/tel-12.png" alt="">
                        </figure>
                        <figure>
                            <img src="img/tel-12.png" alt="">
                        </figure>
                        <figure>
                            <img src="img/tel-1.png" alt="">
                        </figure>
                        <figure>
                            <img src="img/tel-1.png" alt="">
                        </figure>
                        <figure>
                            <img src="img/tel-12.png" alt="">
                        </figure>
                        <figure>
                            <img src="img/tel-12.png" alt="">
                        </figure>
                    </div>
                </section>
                <!--猜你喜欢-->
                <div class="enjoy">
                    <div class="enjoy-top">
                        猜你喜欢
                    </div>
                    <div class="enjoy-bottom">
                        <span>实时推荐你的心心念念</span>
                    </div>
                </div>
                <!--智能生活-->
                <section class="banner item">
                    <h1>智能生活</h1>
                    <div class="tel">
                        <figure>
                            <img src="img/tel-13.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p>全金属</p>
                                <p>￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/tel-13.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p>全金属</p>
                                <p>￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/tel-13.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p>全金属</p>
                                <p>￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/tel-13.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p>全金属</p>
                                <p>￥19.9</p>
                            </figcaption>
                        </figure>
                    </div>
                </section>
                <!--品质生活 可不要-->
                <section class="banner item">
                    <h1>品质生活</h1>
                    <div class="tel">
                        <figure>
                            <img src="img/tel-14.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p>全金属</p>
                                <p>￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/tel-14.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p>全金属</p>
                                <p>￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/tel-14.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p>全金属</p>
                                <p>￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/tel-14.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p>全金属</p>
                                <p>￥19.9</p>
                            </figcaption>
                        </figure>
                    </div>
                </section>
                <!--长假游玩-->
                <section class="banner item main">
                    <h1>长假游玩</h1>
                    <figure>
                        <img src="img/tel-15.png" alt="">
                        <figcaption>
                            <span>最生活毛巾 青春系列&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;<span id="price">￥49</span></span><br>
                            <span>全金属</span>
                        </figcaption>
                    </figure>
                    <div class="tel">
                        <figure id="main-pic">
                            <img src="img/main-1.png" alt="">
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/main-2.png" alt="">
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/main-1.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/main-2.png" alt="">
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                    </div>
                </section>
                <!--黑客级市场-->
                <section class="banner item main">
                    <h1>黑客级市场</h1>
                    <div class="tel">
                        <figure id="main-pic">
                            <img src="img/main-1.png" alt="">
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/main-2.png" alt="">
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/main-1.png" alt="">
                            <figcaption>
                                <p>最生活毛巾 青春系列</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/main-2.png" alt="">
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                    </div>
                </section>
                <!--职场白领-->
                <section class="banner item main">
                    <h1>职场白领</h1>
                    <div class="tel">
                        <figure>
                            <img src="img/main-2.png" alt="">
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure id="main-pic">
                            <img src="img/main-1.png" alt="">
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                    </div>
                    <figure>
                        <img src="img/tel-15.png" alt="">
                        <figcaption>
                            <span>最生活毛巾 青春系列&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;<span id="price">￥49</span></span><br>
                            <span>全金属</span>
                        </figcaption>
                    </figure>
                    <div class="tel">
                        <figure id="main-pic">
                            <img src="img/main-1.png" alt="">
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure>
                            <img src="img/main-2.png" alt="">
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                    </div>
                </section>
                <!--便宜好用的小物-->
                <section class="banner item main">
                    <h1>便宜好用的小物</h1>
                    <div class="tel">
                        <figure style="width:35%">
                            <img src="img/main-3.png" alt="" >
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure style="width:65%">
                            <img src="img/main-4.png" alt="" >
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                    </div>
                    <figure>
                        <img src="img/main-4.png" alt="">
                        <figcaption>
                            <span>最生活毛巾 青春系列&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;&#x3000;<span id="price">￥49</span></span><br>
                            <span>全金属</span>
                        </figcaption>
                    </figure>
                    <div class="tel">
                        <figure style="width:65%">
                            <img src="img/main-5.png" alt="" >
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                        <figure style="width:35%">
                            <img src="img/main-6.png" alt="" >
                            <figcaption>
                                <p>最生活毛巾</p>
                                <p id="price">￥19.9</p>
                            </figcaption>
                        </figure>
                    </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="u-nav navbar-fixed-bottom">
            <div class="container">
                <ul class="list-unstyled">
                    <li>
                        <a href="home.html" id="nav-visited">
                            <span class="glyphicon glyphicon-home u-icon"></span><br>
                            <span>首页</span>
                        </a>
                    </li>
                    <li>
                        <a href="sort.html">
                            <span class="glyphicon glyphicon-th-large u-icon"></span><br>
                            <span>分类</span>
                        </a>
                    </li>
                    <li>
                        <a href="cart.html">
                            <span class="glyphicon glyphicon-shopping-cart u-icon"></span><br>
                            <span>购物车</span>
                        </a>
                    </li>
                    <li>
                        <a href="user.html">
                            <span class="glyphicon glyphicon-user u-icon"></span><br>
                            <span>我的</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script>
            $('.carousel').carousel({
                interval: 1500
            });
            $(window).scroll(function () {
                if ($(document).scrollTop()>0) {
                   $("#h-nav").addClass("changeColor");
                   console.log("我");
                }else{
                    $("#h-nav").addClass("recover");
                }
            });
        </script>
    </body>
</html>